<template>
		<div class="coinTradPage codsg">
			<div class="box_account">
				<div class="fColor2 ft12 ttBk pdlr20 pdtb20">
					<p class="mt10" style="font-size:14px">{{$t('fastExchange.title')}}<a target="_blank"></a></p>
					<p class="mt10">
						<font style="font-size:14px">{{$t('fastExchange.title1')}}</font>
					</p>
					<p class="mt10">
						<font style="font-size:14px">
								{{$t('fastExchange.content')}}
						</font>
					</p>
					<p class="mt10" style="font-size:14px">
						<font>
							{{$t('fastExchange.content1')}}
						</font> <br>
						<font>
							{{$t('fastExchange.content2')}}
						</font> <br>
						<font>
							{{$t('fastExchange.content3')}}
						</font>
						<br>
						<font>
							{{$t('fastExchange.content4')}}
						</font> <br>
						<font>
                            <a href="https://www.bitall.co/assets/IoTh_Whitepaper_1.5_EN.pdf" target="_blank">{{$t('fastExchange.content5')}}</a>
						</font>
					</p>
					<p class="mt10">
						<font></font>
					</p>
				</div>
				<div class="contentBK">
					<ul>
						<li style="display:flex;border">
                            <div style="width:205px;" >
                                <Select v-model="type" @on-change="selectChange">
                                    <Option value="USDT">USDT_ERC20</Option>
                                    <Option value="BTC">BTC</Option>
                                    <Option value="ETH">ETH</Option>
                                </Select>
                                <p class="fColor2 mt20">{{$t('fastExchange.content10')}}：{{assets}}</p>
                            </div>
                            <div style="width:205px">
                                <Input type="text" v-model="number" @on-change="exchangeInput" :placeholder="$t('fastExchange.content9')" style="margin-left: 10px;" />
                                
                            </div>                            
						</li>
						<li class="c_c76">
							<div>
								<p class="fColor2 mt20">{{$t('fastExchange.content6')}}</p>
								<div class="felxbetween pingsoer mt20 alcenter" style="display:flex;">
									<div class="pdlr10"
										style="border-right: 1px solid rgb(78, 91, 133); width: 162px;">IOTH</div>
									<div class="w_68 pdlr10" style="width: 362px;">{{converNum}}</div>
								</div>
								<p class="fColor2 mt20">{{$t('fastExchange.content7')}}：1 {{type}}≈ {{wgp}}</p>
							</div>
						</li>
					</ul>
					<div class="mt20">
                         <Button type="primary" @click="exChange" style="width: 200px;line-height: 28px;font-size:16px;" >{{$t('fastExchange.content8')}}</Button>
					</div>
				</div>
			</div>
			　
		</div>
    
</template>
<style scoped lang="scss">

.coinTradPage,.orderWrap{
    padding-top:50px!important;
    background-color: #161b25;
    font-size: 14px;
}
.box_account{
    background:#101334;
    width: 80%;
    margin: auto;
    height: 100%;
}

.fColor2{
    color:#637085
}

.ft12{
    font-size:12px
}

.ttBk{
    background-color:#101334
}

.pdtb20{
    padding:20px
}

.mt10{
    margin-top:10px
}

.contentBK{
    background-color:#101334;
    padding:20px
}


.c_c76{
    color:#c7cce6
}

.mt20{
    margin-top:20px
}

.flexEnd{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end
}

.pdlr10{
    padding-left:10px
}



</style>
<script>

export default {
    data() {
        let self = this;
        return {
            wgp:"",
            converNum:"",
            type:"USDT",
            assets:0,
            price:0,
            number:"",
            symbolePrice:0,
        }
    },
    computed: {
        isLogin: function () {
            return this.$store.getters.isLogin;
        },
        lang: function () {
            return this.$store.state.lang;
        }
    },
    watch: {
        
    },
    created: function () {
        //没登录情况下跳转
       if(!this.isLogin){
           this.init();
       }
       this.getWallet();
    },
    mounted: function () {
        
    },
    methods: {
        getWallet() {
            this.$http
                .post(this.host + this.api.uc.wallet + this.type, {})
                .then(response => {
                    console.log(response);
                    let resp = response.body;
                    this.assets = (resp.data && resp.data.balance) || '';
                });
            this.getPrice();
        },
        getPrice() {
            this.$http
                .post(this.host + '/uc/asset/fastInfo/' + this.type, {})
                .then(response => {
                    let resp = response.body;
                    if(resp.code == 0){
                        this.price = resp.data.price;
                        this.symbolPrice = resp.data.symbolPrice;   
                         //换算汇率
                        this.wgp = (this.symbolPrice / this.price).toFixed(8);
                        this.converNum = (this.number * this.wgp).toFixed(8);
                    }
            });
        },
        selectChange(){
            this.getWallet();
        },
        exChange(){
            if(this.assets < this.number){
                this.$Message.warning($t('fastExchange.tips1'));
                return;
            }

            let r = /^[0-9]+\.?[0-9]{0,9}$/;　　//正数
            let flag = r.test(this.number);
            if(!flag){
                this.$Message.warning($t('fastExchange.tips2'));
                return;
            }

            this.$http
                .post(this.host + '/uc/asset/fastInfo/exchange', {
                    "symbol":this.type,
                    "amount":this.number,
                })
                .then(response => {
                    let resp = response.body;
                    if(resp.code == 0){
                        this.$Message.info("success");
                         this.getWallet();
                    }else{
                        this.$Message.error("fail");
                    }
            });
        },
        init(){
            this.$router.push({
                path: 'login',
            })
        },
        exchangeInput(){
            this.converNum = (this.number * this.wgp).toFixed(8);
        }
    }
};
</script>
